import * as React from "react";
import { Button, DatePicker } from "antd";
import { Moment } from "moment";
const RangePicker:any= DatePicker.RangePicker;

export interface DayOrHourTimePickerProps {
  style?: any;
  defaultvalue?: [Moment | null, Moment | null];
  value?: [Moment | null, Moment | null];
  mod?: string;
  onChange: (date: any, dateString: any[]) => any;
}

export interface DayOrHourTimePickerState {
  time: string;
  dateString: string[];
}

class DayOrHourTimePicker extends React.Component<
  DayOrHourTimePickerProps,
  DayOrHourTimePickerState
> {
  state = {
    time: "date",
    dateString: ["", ""],
  };
  Bbb: [Moment | null, Moment | null] = this.props.defaultvalue
    ? this.props.defaultvalue
    : [null, null];
  render() {
    return (
      <>
        <span style={{ paddingLeft: 26 }}>时间粒度：</span>
        <div className="changeType_btn d_inlineFlex">
          <Button
            className="left"
            type={this.state.time === "date" ? "primary" : "default"}
            onClick={() => {
              this.setState({ time: "date" });
              this.changeJson("date");
            }}
          >
            日
          </Button>
          <Button
            className="center"
            type={this.state.time === "hour" ? "primary" : "default"}
            onClick={() => {
              this.setState({ time: "hour" });
              this.changeJson("hour");
            }}
          >
            小时
          </Button>
        </div>
        <span style={{ paddingLeft: 26 }}>时间筛选：</span>
        <RangePicker
          value={this.Bbb}
          showTime={this.state.time !== "date"}
          format={this.state.time === "date" ? "YYYY/MM/DD" : "YYYY/MM/DD HH"}
          onChange={(date: any) => {
            this.Bbb = date;
            this.changeJson(this.state.time);
          }}
        />
      </>
    );
  }
  componentWillMount() {
    if (this.props.value) {
      this.Bbb = this.props.value;
      this.props.onChange(3, this.Bbb);
    }
  }
  shouldComponentUpdate(
    newProps: DayOrHourTimePickerProps,
    newState: DayOrHourTimePickerState
  ) {
    if (newProps.value) {
      this.Bbb = newProps.value;
    }
    return true;
  }
  changeJson(time) {
    let timeType: number = 2;
    console.log(time)
    switch (time) {
      case "hour":
        timeType = 2;
        if (this.Bbb[0] && this.Bbb[1]) {
          this.setState({
            dateString: [
              this.Bbb[0].format("YYYY/MM/DD HH"),
              this.Bbb[1].format("YYYY/MM/DD HH"),
            ],
          });
        }
        break;
      case "date":
        timeType = 3;
        if (this.Bbb[0] && this.Bbb[1]) {
          this.setState({
            dateString: [
              this.Bbb[0].format("YYYY/MM/DD"),
              this.Bbb[1].format("YYYY/MM/DD"),
            ],
          });
        }
        break;

      default:
        break;
    }
    console.log(this.Bbb[0]?.format("YYYY-MM-DD HH:mm:ss"),this.Bbb[1]?.format("YYYY-MM-DD HH:mm:ss"))
    this.props.onChange(timeType, this.Bbb);
    this.forceUpdate()
  }
}

export default DayOrHourTimePicker;
